
<script setup>
import { ref,computed,onMounted } from 'vue';
import {useAddressStore} from "@/stores";
import pcaCodeData  from "@/assets/pca-code.json";

const AddressStore=useAddressStore()

const props = defineProps({
  goodsList: {
    type: Array,
    required: true
  },
  drawerSize: {
    type: String,
    default: '60%'
  }
});

const drawerVisible = ref(false);

const open = () => {
  drawerVisible.value =true
};
defineExpose({
  open
})

const AddressList=ref([]) //地址列表
// 使用findAddressByCode方法转换code为汉字地址
onMounted(() => {
  // 假设AddressStore.DefautAddress是一个包含地址code的数组
  AddressList.value = AddressStore.DefautAddress.map(address => {
    return {
      ...address,
      adpca: findAddressByCode(address.adpca)
    }
  })
  console.log(AddressList.value)
})
// 解析pca-code.json数据，创建一个根据code获取汉字地址的方法
const findAddressByCode = (code) => {
  // 辅助函数用于递归搜索
  function searchAddress(data, code, path = []) {
    let found = false;
    for (const item of data) {
      if (item.code === code) {
        path.push(item.name); // 将当前找到的地址名称添加到路径中
        found = true;
        break;
      }
      if (item.children) {
        found = searchAddress(item.children, code, path); // 递归搜索下一级地址
        if (found) {
          path.push(item.name); // 如果在下一级找到，将当前级地址添加到路径中
          break;
        }
      }
    }
    return found;
  }
  const path = [];
  const found = searchAddress(pcaCodeData, code, path);
  return found ? path.reverse().join(' / ') : '未知地址';
}

//地址渲染
const getFullAddress = (address) => {
  const { adname, addetail, adpca, adphone } = address;
  return `${adname}    /${adpca}    /${addetail}    /${adphone}`;
}

const paymentMethod = ref('alipay');
const totalAmount = computed(() => {
  return props.goodsList.reduce((sum, item) => sum + item.price * item.goodsNum, 0);
});
const payOrder = () => {
  if (!paymentMethod.value) {
    alert('请选择支付方式');
    return;
  }
  // 这里可以调用支付接口进行支付操作
  alert('支付成功！');
};

</script>


<template>
  <el-drawer
      v-model="drawerVisible"
      :with-header="false"
      :size="drawerSize"
  >
    <!-- 插槽用于渲染商品列表 -->
    <template #default>
      <div class="order-page">

        <el-card style="max-width: 100%">
          <template #header>结算页</template>

          <h4>收货人信息</h4>
          <!-- 收货人信息 -->
          <el-select
              v-model="AddressList.value"
              clearable
              placeholder="请选择收货人信息"
              style="width: 100%"
          >
            <el-option
                v-for="item in AddressList"
                :key="item.id"
                :label="getFullAddress(item)"
                :value="item.id"
            />
          </el-select>
          <hr>

          <!-- 支付方式 -->
          <h4>支付方式</h4>
          <el-form label-width="120px">
            <el-form-item label="支付方式">
              <el-radio-group v-model="paymentMethod">
                <el-radio label="alipay">支付宝</el-radio>
                <el-radio label="wechat">微信支付</el-radio>
                <el-radio label="credit">信用卡支付</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>

          <hr>

          <!-- 商品清单 -->
          <div class="product-list">
            <h4>商品清单</h4>
            <el-table :data="props.goodsList" style="width: 100%;">
              <el-table-column  label="商品图片" width="180">
                <template #default="{ row }">
                  <img :src="row.img" alt="商品图片" class="product-img" />
                </template>
              </el-table-column>
              <el-table-column prop="name" label="商品名称" width="180"></el-table-column>
              <el-table-column prop="goodsNum" label="数量" width="180"></el-table-column>
              <el-table-column prop="price" label="单价" width="180"></el-table-column>
              <el-table-column label="总价">
                <template #default="{ row }">
                  {{ row.price * row.goodsNum }} 元
                </template>
              </el-table-column>
            </el-table>
          </div>

          <hr>

          <div class="total-and-button">
            <!-- 订单总金额 -->
            <div class="total-amount">
              <h2>应付总金额: <span>{{ totalAmount }}</span>元</h2>
            </div>
            <!-- 立即支付按钮 -->
            <el-button class="button" type="danger" plain @click="payOrder">立即支付</el-button>
          </div>
        </el-card>

      </div>
    </template>
  </el-drawer>
</template>

<style scoped>
.product-img {
  width: 100%; /* 根据需要调整图片的宽度 */
  height: auto;
}
.total-and-button {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: flex-end; /* 将子元素对齐到容器的末端 */
}
</style>
